<template>
  <a-card :bordered="false">
    <div class="table-page-search-wrapper">
      <div class="title">企微聚合码设置</div>
      <a-form-model ref="form" :model="model" :rules="validatorRules">
        <a-form-model-item label="名称：" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="name">
          <a-input v-model="model.name" :maxLength="20" />
        </a-form-model-item>
        <a-form-model-item label="适用小程序：" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="brandId" v-if="insert==false">
          <a-select v-model="model.brandId" placeholder="请选择" show-search :filter-option="filterOption">
            <a-select-option v-for="(item, index) in departList" :key="index" :value="item.id">
              {{ item.brandName }}
            </a-select-option>
          </a-select>
        </a-form-model-item>
      <a-form-model-item label="适用小程序：" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="brandIdList" v-else>
        <a-select v-model="model.brandIdList" placeholder="请选择" show-search :filter-option="filterOption" mode="multiple" >
            <a-select-option v-for="(item, index) in departList" :key="index" :value="item.id" >
              {{ item.brandName }}
            </a-select-option>
          </a-select>
      </a-form-model-item>
        <a-form-model-item label="备注：" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-textarea placeholder="请输入" v-model="model.remark" :rows="4" :maxLength="100" />
        </a-form-model-item>
        <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="gzlist" label="聚合码规则：">
          <div>以下规则从上至下依次执行，当上一个规则不满足时执行下一个规则。当上一层级的规则被执行时，则不会再执行下一层级的规则。</div>
          <div v-for="(item, index) in gzlist" style="display: flex; justify-content: space-between" :key="index">
            <!-- 点击企微联系我-多人码 -->
            <div class="guize" @click="celectQw(item, index)">
              <div class="number">{{ index + 1 }}</div>
              <a class="text" v-if="item.id == 4">{{ item.text }}</a>
              <div class="text" v-else>{{ item.text }}</div>
            </div>
            <div class="imgFlex">
              <img src="https://img.bzhz.jnbygroup.com/dincanup.png" alt="" class="imgImg" @click="moveUp(index)" v-show="(index != 0 && index !=3)" />
              <img src="https://img.bzhz.jnbygroup.com/dincandown.png" alt="" class="imgImg" @click="moveDown(index)" v-show="(index != gzlist.length - 1 && index !=2)" />
              <a-popconfirm @confirm="() => deleteItem(index, item)">
                <template slot="title">
                  <p>确认要删除该聚合码规则吗？</p>
                </template>
                <img src="https://img.bzhz.jnbygroup.com/dincandelete.png" alt="" class="imgImg"/>
              </a-popconfirm>
            </div>
          </div>
          <a-button @click="instertGz" v-if="gzlist.length < 4" class="addGz">添加规则</a-button>
        </a-form-model-item>
        <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="backgroundImg" label="封面图">
          <JImageUpload :uploadParams="getUploadParams()" :isMultiple="true" :fileSize="2" :number="1" :accept="'image/*'" @fileChange="homeImageChange" v-model="model.backgroundImg"></JImageUpload>
          <div class="upload__tip" style="line-height: 16px">建议尺寸750x1448px，支持jpg、png图片格式，大小不超过500KB</div>
        </a-form-model-item>
      </a-form-model>
      <div style="text-align: center">
        <a-button @click="cencal"> 取消 </a-button>
        <a-button type="primary" style="margin-left: 10px" @click="onSubmit"> 保存 </a-button>
      </div>
    </div>
    <!-- 添加规则下拉选 -->
    <a-modal title="提示" :width="700" :visible="appointmentVisible" :confirmLoading="confirmLoading" @ok="appointmentOk()" @cancel="appointmentCancel" cancelText="关闭">
      <a-spin :spinning="confirmLoading">
        <a-form-model ref="form2" :model="model1" :rules="validatorRules">
          <a-form-model-item :labelCol="{ span: 6 }" :wrapperCol="{ span: 14, offset: 0 }" label="请选择聚合码规则" prop="brand">
            <a-select v-model="model1.brand" placeholder="请选择" show-search :filter-option="filterOption" @change="celectList">
              <a-select-option v-for="(item, index) in departList1" :key="index" :value="item.id" :disabled="item.disabled">
                {{ item.name }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
        </a-form-model>
      </a-spin>
    </a-modal>
    <!-- 请选择一个企微联系我-多人码 -->
    <a-modal title="提示" :width="1200" :visible="qiwei" :confirmLoading="confirmLoading" @ok="qiweiCancel()" @cancel="qiweiCancel" cancelText="关闭">
      <a-spin :spinning="confirmLoading">
        <div class="tableTop">
          <div class="tableTitle">请选择一个企微联系我-多人码</div>
          <a style="color: #1890ff" @click="insertDren">新建多人码</a>
        </div>
        <a-table ref="table" rowKey="id" size="middle" :scroll="{ x: 1000 }" :columns="columns" :dataSource="dataSource" :pagination="ipagination" :loading="loading" @change="handleTableChange">
          <span slot="action" slot-scope="text, record">
            <a @click="handleEdit(record)"> 确认选择 </a>
          </span>
        </a-table>
      </a-spin>
    </a-modal>
    <!-- 新建多人码 -->
    <a-modal title="提示" :width="700" :visible="addDuoren" :confirmLoading="confirmLoading" @ok="addDuorenOk()" @cancel="addDuorenCancel" cancelText="关闭">
      <a-spin :spinning="confirmLoading">
        <a-form-model ref="form1" :model="model2" :rules="validatorRules">
          <a-form-model-item label="备注：" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="remark">
            <a-input v-model="model2.remark" />
          </a-form-model-item>
          <a-form-model-item label=""  prop="" style="    margin-left: 107px;width: 383px;">
              <a-radio-group v-model="radioValue" @change="radioValueChange">
                <a-radio :value="1">
                部门
                </a-radio>
                <a-radio  :value="2">
                人员名称
                </a-radio>
            </a-radio-group>
            <a-input v-model="memberName" v-if="radioValue == 2" @change="memberchange" style="width: 383px;" />
            <el-cascader ref="cascade" v-if="radioValue == 1" :options="options" :props="optionProps" clearable :show-all-levels="false" @change="checkboxChange" v-model="treeObject" style="width: 383px;" filterable></el-cascader>
          </a-form-model-item>
          <a-form-model-item label="选中人员：" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="selectDiv">
            <div class="selectDiv">
              <span v-for="item,index in selectList" class="selectName" :key="index">
                <span>{{ item.name }}</span>
                <a-icon type="close-circle" class="close" @click="delectSelect(item)" />
              </span>
            </div>
          </a-form-model-item>
          <a-form-model-item label="人员列表：" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="">
            <div class="perpleSelect">
              <a-checkbox @change="onChange" v-model="xuanzhong">全选</a-checkbox>
              <div v-for="item,index in renyuanList" :key="index">
                <!-- <div>当前部门:<span class="bumen">{{ item.name }}</span></div> -->
                <div v-for="(item1, index) in item.userList" :key="index" style="margin-left: 20px">
                  <div style="color:#f2954a;" >{{item1.deptFullName == '' || item1.deptFullName == undefined?'' :`部门：${item1.deptFullName}`}}</div>
                  <div @click="select(item1, item.id)" v-if="item1.isCheck" class="selectpre">{{ item1.name }}</div>
                  <div @click="select(item1, item.id)" v-else>{{ item1.name }}</div>
                </div>
              </div>
            </div>
          </a-form-model-item>
        </a-form-model>
      </a-spin>
    </a-modal>
  </a-card>
</template>
<script>
import JImageUpload from '@/components/qiniuUpload/JImageUpload.vue'
import globalData from '@/assets/js/common'
import { getGatherById, brandList, saveOrUpdateGather, pageCrowdVo, saveOrUpdateCrowd, departmentTree, getMemberListByDepId,memberListByName } from '@/api/marketingCenter/code'
import { size } from 'lodash'

export default {
  components: { JImageUpload },
  data() {
    var gzlist = (rules, value, callback) => {
      if (this.gzlist.length !== 0) {
        return callback()
      } else {
        callback('请添加聚合码规则')
      }
    }
    var selectDiv = (rules, value, callback) => {
      if (this.selectList != undefined && this.selectList.length !== 0) {
        return callback()
      } else {
        callback('请添加人员!')
      }
    }
    return {
      xuanzhong:false,//全选
      treeList: [],
      treeObject: [], //树形绑定的数据
      optionProps: {
        value: 'id',
        label: 'name',
        children: 'children',
        // multiple: true, //多选
        multiple: false, //单选
        checkStrictly: true,
        emitPath: false //绑定的内容只获取最后一级的value值。
      },
      options: [], //树形数据
      initialValue: [],
      bumenSelect: [],
      selectper: {}, //当前选中人员的信息
      isCheck: false, //是否选中人员
      newArr: [], //定义一个新数组
      selectList: [], //选中人员
      renyuanList: [], //人员列表
      perple: [],
      tree: [],
      arrList: [],
      form2: this.$form.createForm(this, { name: 'form2' }),
      multipleTreeData: [],
      initialValue: [], //声明默认值
      // end
      /* table加载状态 */
      loading: false,
      ipagination: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30'],
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + ' 共' + total + '条'
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0
      },
      gzCelectName: '',
      gzCelectId: '',
      // 选中的规则的内容
      gzlist: [
        { text: '用户专属导购二维码', disabled: false, id: 1 },
        { text: '用户服务门店多人码', disabled: false, id: 2 },
        { text: 'LBS获取附近门店多人码', disabled: false, id: 3 },
        { text: '企微联系我-多人码（请点击设置）', disabled: false, id: 4 }
      ],
      model: {
        backgroundImg:'https://img.bzhz.jnbygroup.com/FoJciLxp-POpKLkm_t1q9MS8t0uH',
      }, //页面数据
      model1: {}, //规则数据
      model2: {}, //多人码数据
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      addDuoren: false, //新建多人码弹框
      appointmentVisible: false, //添加规则弹框
      confirmLoading: false, //加载
      qiwei: false, //设置多人码弹框
      validatorRules: {
        gzlist: [{ validator: gzlist, required: true, message: '请添加聚合码规则!' }],
        selectDiv: [{ validator: selectDiv, required: true, message: '请添加人员!' }],
        brandId: [{ required: true, message: '请选择!' }],
        brandIdList: [{ required: true, message: '请选择!' }],
        brand: [{ required: true, message: '请选择!' }],
        name: [{ required: true, message: '请输入!' }],
        remark: [{ required: true, message: '请输入!' }],
        backgroundImg: [{ required: true, message: '请输入!' }]
      },
      // 小程序的下拉选
      departList: [], //适用小程序
      // 规则的下拉选
      departList1: [
        { name: '用户专属导购二维码', disabled: false, id: 1 },
        { name: '用户服务门店多人码', disabled: false, id: 2 },
        { name: 'LBS获取附近门店多人码', disabled: false, id: 3 },
        { name: '企微联系我-多人码（请点击设置）', disabled: false, id: 4 }
      ], //适用小程序
      addDren: [],
      Jhset: '', //父页面传过来的类型 编辑有值其他无值
      jhcodeId: '', //父页面传过来的id
      crowId: '',
      dataSource: [], //表格数据
      open: true,
      radioValue:1,
      memberName:'',
      // 表头
      columns: [
        {
          title: '序号',
          dataIndex: '',
          key: 'rowIndex',
          width: 50,
          align: 'center',
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          }
        },
        {
          title: '多人码备注',
          align: 'center',
          dataIndex: 'remark'
        },
        {
          title: '包含成员',
          align: 'center',
          dataIndex: 'members'
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          scopedSlots: { customRender: 'action' },
          fixed: 'right',
          width: 100
        }
      ]
    }
  },
  created() {
    var url = window.location.pathname.split('=')
    this.jhcodeId = Number(url[1])
    this.Jhset = url[2]
    if (this.jhcodeId == 0 || this.jhcodeId) {
      this.insert=false
      this.jhcodeSet(this.jhcodeId)
    }else{
      this.insert=true
    }
    console.log(this.insert);
    // 获取适用小程序下拉选
    this.getBrandId()
    // 获取级联下拉框数据
    this.getTreeData()
  },
  methods: {
    //获取适用小程序下拉
    getBrandId() {
      brandList().then(res => {
        if (res.code == 200) {
          this.departList = res.data
        }
      })
    },
    //编辑聚合码设置
    jhcodeSet(jhcodeId) {
      getGatherById({ id: jhcodeId }).then(res => {
        if (res.code == 200) {
          this.model = res.data
          res.data.content = res.data.content.split(',').map(item => {
            let obj = {}
            obj.id = Number(item)
            if (item == 1) {
              obj.text = '用户专属导购二维码'
            } else if (item == 2) {
              obj.text = '用户服务门店多人码'
            } else if (item == 3) {
              obj.text = 'LBS获取附近门店多人码'
            } else if (item == 4) {
              //如果有多人码选择的则赋值crowId
              this.crowId=res.data.crowId
              obj.text = res.data.crowdRemark
            }
            return obj
          })
          this.gzlist = res.data.content
          this.gzlist.forEach(e => {
            e.disabled = true
          })
        } else {
          this.$message.warning(res.msg)
        }
      })
    },
    //新建多人码
    insertDren() {
      this.form2.resetFields()
      this.addDuoren = true
    },
    //新建多人码取消
    addDuorenCancel() {
      this.addDuoren = false
    },
    //新建多人码确定
    addDuorenOk() {
      var push = {
        memberList: this.selectList,
        remark: this.model2.remark
      }
      if (this.drcodeId == 0 || this.drcodeId) {
        push.id = this.drcodeId
      }
      this.$refs.form1.validate(valid => {
        if (valid) {
          this.confirmLoading = true
          saveOrUpdateCrowd(push).then(res => {
            this.confirmLoading = false
            if (res.success) {
              this.getList()
              this.addDuoren = false
            } else {
              this.$message.warning(res.message)
            }
          })
        }
      })
    },
    //保存
    onSubmit() {
      var list = []
      var listFour = ''
      this.gzlist.forEach(e => {
        list.push(e.id)
        if (e.id == 4) {
          listFour = '4'
        }
      })
      this.model.content = list.toString()
      var model = {
        name: this.model.name,
        brandId: this.model.brandId,
        remark: this.model.remark,
        content: this.model.content,
        backgroundImg: this.model.backgroundImg
      }
      if(this.model.brandIdList && this.model.brandIdList.length !=0){
        var a=this.model.brandIdList
        model.brandIds=a.toString()
      }
      //如果选择了多人码则传入crowId
      if (listFour == '4') {
        if(!this.crowId || this.crowId==''){
          this.$message.warning('请设置多人码规则')
          return;
        }
        model.crowId = Number(this.crowId)
      }
      if (this.Jhset == 'bj') {
        model.id = this.jhcodeId
      }
      this.$refs.form.validate(valid => {
        if (valid && this.open == true) {
          this.open = false
          saveOrUpdateGather(model).then(res => {
            this.open = true
            if (res.success) {
              this.$router.push(`/marketingCenter/code/jhcode`)
            } else {
              this.$message.warning(res.msg)
            }
          })
        }
      })
    },
    // 上移
    moveUp(index) {
      let arr = this.gzlist
      arr.splice(index - 1, 1, ...arr.splice(index, 1, arr[index - 1]))
    },
    // 下移
    moveDown(index) {
      let arr = this.gzlist
      arr.splice(index, 1, ...arr.splice(index + 1, 1, arr[index]))
    },
    // 删除
    deleteItem(index, item) {
      this.departList1.map(val => {
        if (this.gzlist[index].id == val.id) {
          val.disabled = false
        }
      })
      this.gzlist.splice(index, 1)
    },
    //添加规则
    instertGz() {
      this.model1 = {}
      //使用map循环如果列表里面的和已经选择的是一样的则disabled为true
      this.gzlist.map(item => {
        this.departList1.map(val => {
          if (item.id == val.id) {
            val.disabled = true
          }
        })
      })

      this.appointmentVisible = true
      // this.gzlist.push({})弹框
    },
    //添加规则取消
    appointmentCancel() {
      this.appointmentVisible = false
    },
    //添加规则确定
    appointmentOk() {
      this.$refs.form2.validate(valid => {
        if (valid) {
          this.gzlist.push({ id: this.gzCelectId, text: this.gzCelectName })
          //当选择请设置多人码规则(id是4)时永远放在数组最后一位
          this.gzlist.sort((a, b) => b.id === 4 ? -1 : b)

          this.appointmentVisible = false
        }
      })
    },
    //点击请选择一个企微联系我-多人码
    celectQw(item, index) {
      if (item.id == 4) {
        this.qwIndex = index
        this.getList()
        this.qiwei = true //多人码弹框
      }
    },
    //添加规则事件
    celectList(e) {
      //循环选中的下拉选取选中的名字
      this.departList1.forEach(el => {
        if (e == el.id) {
          this.gzCelectName = el.name
          this.gzCelectId = el.id
        }
      })
    },
    //页面取消
    cencal() {
      this.$router.push(`/marketingCenter/code/jhcode`)
    },
    //企微多人码取消
    qiweiCancel() {
      this.qiwei = false
    },
    //企微多人码确定
    qiweiOk() {

    },
    //分页的事件
    handleTableChange(pagination, filters, sorter) {
      //分页、排序、筛选变化时触发
      //TODO 筛选
      if (Object.keys(sorter).length > 0) {
        this.isorter.column = sorter.field
        this.isorter.order = 'ascend' == sorter.order ? 'asc' : 'desc'
      }
      this.ipagination = pagination
      this.getList()
    },
    //列表确认选择
    handleEdit(row) {
      this.gzlist[this.qwIndex].text = row.remark
      this.crowId = row.id
      this.qiwei = false
    },
    //多人码列表
    getList() {
      var list = {
        current: this.ipagination.current,
        size: this.ipagination.pageSize
      }
      pageCrowdVo(list).then(res => {
        if (res.success) {
          this.dataSource = res.data.records
          this.ipagination.total = res.data.total
        }
      })
    },
    // 上传图片
    getUploadParams() {
      return { ...globalData.uploadParams }
    },
    //上传图片事件
    homeImageChange(list) {
      this.model.backgroundImg = list.length > 0 ? list[0].url : []
    },
    filterOption(input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
    },
    //获取树形
    getTreeData() {
      departmentTree().then(res => {
        this.options = res.data
      })
    },
    //人员列表全选
    onChange() {
            var setlist={}
            if (this.renyuanList.length == 0) return
            this.renyuanList[0].userList.forEach(el=>{
                if(this.xuanzhong){//如果选中全选
                    el.isCheck=true
                    setlist={deptId: el.deptId, isCheck: true, name: el.name, userId: el.userId, id: el.id}
                    this.selectList.push(setlist)//把加载出来的人员列表全部改成选中状态
                    this.filterTransFer(this.selectList)
                }else{//如果不选中
                    el.isCheck=false
                    for (let index = 0; index < this.selectList.length; index++) {
                        const element = this.selectList[index];
                        if(el.id==element.id){//循环选中列表 如果id一样
                            this.selectList.splice(index, 1)//在选中人员中删除人员
                        }
                    }
                }
            })
        },
        getMemberListByName(e) {
            console.log(e);
            // memberListByName({name:this.memberName}).then(res => {
            //     console.log(res,'res-');
            // })
            this.$nextTick(() => {
            var aa = [];
                memberListByName({ name: this.memberName }).then(res => {
                    var flag = true;
                    for(let i=0,len=res.data.length;i<len;i++){
                        res.data[i].isCheck = false//设置默认未选中
                        if (this.selectList.length != 0) {//如果选中的人员不为空
                            this.selectList.forEach(e => {
                                if (e.name == res.data[i].name) {//如果选中的人员和接口返回的人员是一个则选中
                                    res.data[i].isCheck = true
                                }
                            })
                        }
                        if(res.data[i].isCheck==false){//如果有一个为false
                            flag = false;//则为false
                        }
                    }
                    if(flag){//如果全部选中
                        this.xuanzhong=true//则选中
                    }else{
                        this.xuanzhong=false//否则为fasle
                    }
                    this.perple = res.data
                    // aa.push({ name: item.name, id: xuanzhongID, userList: this.perple })
                    aa.push({ id: e, userList: this.perple })
                    this.renyuanList = aa//人员列表
                })
            })
        },
        memberchange() {
            this.getMemberListByName()
        },
        radioValueChange() {
            this.selectList = []
            this.renyuanList = []
            this.treeObject= {}
            this.memberName= ''
            this.xuanzhong = false
        },
    //树形的change
    checkboxChange(e) {
      this.$nextTick(() => {
            var aa = [];
                getMemberListByDepId({ deptId: e }).then(res => {
                    var flag = true;
                    for(let i=0,len=res.data.length;i<len;i++){
                        res.data[i].isCheck = false//设置默认未选中
                        if (this.selectList.length != 0) {//如果选中的人员不为空
                            this.selectList.forEach(e => {
                                if (e.name == res.data[i].name) {//如果选中的人员和接口返回的人员是一个则选中
                                    res.data[i].isCheck = true
                                }
                            })
                        }
                        if(res.data[i].isCheck==false){//如果有一个为false
                            flag = false;//则为false
                        }
                    }
                    if(flag){//如果全部选中
                        this.xuanzhong=true//则选中
                    }else{
                        this.xuanzhong=false//否则为fasle
                    }
                    this.perple = res.data
                    // aa.push({ name: item.name, id: xuanzhongID, userList: this.perple })
                    aa.push({ id: e, userList: this.perple })
                    this.renyuanList = aa//人员列表
                })
            })
    },
    //删除数组选中的人员
    delectSelect(item) {
      for (let index = 0; index < this.selectList.length; index++) {
        if (item.id == this.selectList[index].id) {
          //如果点击的是数组里面对应的id则删除
          this.selectList[index].isCheck = false
          //更改人员列表选中未选中
          this.renyuanList.forEach(e => {
            //循环人员列表
            e.userList.forEach(el => {
              if (this.selectList[index].name == el.name) {
                //如果名字是一个则选中
                el.isCheck = false
              }
            })
            var flag = true;
            for (let index = 0; index < e.userList.length; index++) {
                const element = e.userList[index];
                if(element.isCheck == false){//如果有一个为false
                    flag = false;//则为false
                }
            }
            if(flag){//如果全部选中
                this.xuanzhong=true//则选中
            }else{
                this.xuanzhong=false//否则为fasle
            }
          })
          this.selectList.splice(index, 1)
        }
      }
      //删除选中人员，对应部门删除
      // this.treeObject = newList
    },
    //人员列表点击选中
    select(item, id) {
      var selectper = {}//先置空
      selectper = { deptId: id, isCheck: true, name: item.name, userId: item.userId, id: item.id }//每次点击选中的部门以及人员
      this.selectper = selectper//当前选中的人员
      this.selectList.push(selectper)
      var flag = true;
      for (let index = 0; index < this.renyuanList.length; index++) {
          const element = this.renyuanList[index];
          if(element.isCheck == false){//如果有一个为false
              flag = false;//则为false
          }
      }
      if(flag){//如果全部选中
          this.xuanzhong=true//则选中
      }else{
          this.xuanzhong=false//否则为fasle
      } if (this.renyuanList[0].userList.length !== this.selectList.length) {
        this.xuanzhong=false
      }
      this.filterTransFer(this.selectList)
    },
    //需要过滤排查的数组
    filterTransFer(arr) {
      var obj = {}
      const newArr = arr.reduce(function (item, next) {
        obj[next.id] ? '' : (obj[next.id] = true && item.push(next))
        return item
      }, [])
      //更改人员列表选中未选中
      this.renyuanList.forEach(e => {
        e.userList.forEach(el => {
          if (this.selectper.name == el.name) {
            //如果名字是一个则选中
            el.isCheck = true
          } else {
            // el.isCheck = false
          }
        })
      })
      this.selectList = newArr //筛选出来的人员
    }
  }
}
</script>
<style scoped  lang="less">
.title {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 20px;
}

.guize {
  width: 956px;
  height: 45px;
  padding: 8px;
  background-color: #ccc;
  text-align: center;
  border-radius: 5px;
  display: flex;
  margin-top: 10px;
  line-height: 30px;
}

.number {
  width: 30px;
  height: 30px;
  line-height: 30px;
  border-radius: 50%;
  background-color: #fff;
}

.text {
  margin-left: 5px;
}

.text1 {
  margin-left: 5px;
  color: #1890ff;
  border-bottom: 1px solid #1890ff;
}

.imgFlex {
  display: flex;
  line-height: 55px;
  margin-left: 20px;
}

.imgImg {
  width: 26px;
  height: 26px;
  margin-left: 10px;
  margin-top: 15px;
}

.addGz {
  margin-top: 10px;
}

.tableTop {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.tableTitle {
  margin-left: 35%;
  font-weight: 600;
  color: #000;
}

.selectDiv {
    border: 1px solid #d9d9d9;
    width: 100%;
    padding: 0px 10px;
    word-wrap: break-word;
    border-radius: 4px;
    min-height: 32px;
}

.selectName {
  /* border: 1px solid #ccc; */
  padding: 2px 5px;
}

.close {
  margin-left: 2px;
}

.perpleSelect {
  // width: 200px;
  height: 300px;
  padding: 0px 5px;
  overflow-y: scroll;
  border: 1px solid #ccc;
}

.bumen {
  color: #1890ff;
}

.selectpre {
  color: #1890ff;
}
</style>
